<template>
  <page-header-wrapper :title="false">
    <a-card>
      <div class="main">
        <div class="left">
          <div class="search-wrap" style="display: none;">
            <a-input-search v-model="keyword" placeholder="搜索菜单" size="large" @search="onSearch" />
          </div>
          <a-tree show-line v-if="treeData.length>0" default-expand-all :tree-data="treeData" @select="onSelect"/>
        </div>
        
        <div class="right">
          <div class="table-operate">
            <a-button icon="plus" type="primary" size="large" style="margin-right: 10px;" @click="handleAdd">新增</a-button>
            <!-- <a-button icon="delete" type="danger" size="large" @click="setAdmin">删除</a-button> -->
          </div>

          <a-table rowKey="id"
            :columns="columns" :data-source="userList">
            <div slot="name" slot-scope="text,record">
              <a-tag color="red" v-if="record.status === 2">{{text}}（已冻结）</a-tag>
              <div v-else>{{text}}</div>
            </div>
            
            <div slot="type" slot-scope="text,record">
              <a-tag color="red" v-if="record.type === 1">目录</a-tag>
              <a-tag color="red" v-else-if="record.type === 2">菜单</a-tag>
              <a-tag color="red" v-else>按钮</a-tag>
            </div>
            
            <div slot="action" slot-scope="text,record" class="table-action">
              <a-button icon="edit" type="primary" @click="handleEdit(record)" v-if="record.pid !== '0'">编辑</a-button>
              <a-button icon="delete" type="danger" @click="op(2, record.id)" v-if="record.status === 1 && record.pid !== '0'">冻结</a-button>
              <a-button icon="delete" type="primary" @click="op(1, record.id)" v-if="record.status !== 1 && record.pid !== '0'">激活</a-button>
            </div>
          </a-table>
                  
        </div>
        
      </div>
    </a-card>
    
   <create-form
      ref="createModal"
      :visible="visible"
      :loading="confirmLoading"
      :model="mdl"
      @cancel="handleCancel"
      @ok="handleOk"
    />
    
  </page-header-wrapper>
</template>
<script>
import { getTreeAll, listAll, sysPermissionOp, sysPermissionAdd, sysPermissionUpdate } from '@/api/sys.js'
  import CreateForm from './modules/sys-permission-form'
export default {
    components: {
      CreateForm
    },
  data() {
    return {
      // default-expand-all tree默认全部展开
      visible: false,
      confirmLoading: false,
      mdl: null,
      keyword: '',
      keyword2: '',
      treeData: [],
      userList: [],
      columns: [
        // {
        //   title: 'ID',
        //   dataIndex: 'id'
        // },
        {
          title: '名称',
          dataIndex: 'name',
          scopedSlots: { customRender: 'name' }
        },
        {
          title: '权限',
          dataIndex: 'perms',
        },
        {
          title: '父级菜单',
          dataIndex: 'pidName',
        },
        {
          title: '类型',
          dataIndex: 'type',
          scopedSlots: { customRender: 'type' }
        },
        {
          title: '排序号',
          align: 'center',
          dataIndex: 'orderNum'
        },
        {
          title: '操作',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },
          align: 'center',
          width: 250
        }
      ],
      selectedRowKeys: [],
      setloading: false,
      selectedDeptId: '',
      defaultExpandAll: true,
      needSetAdmin: 0,
    }
  },
  computed: {
    hasSelected() {
      return this.selectedRowKeys.length > 0;
    }
  },
  watch: {
    checkedKeys(val) {
      console.log('onCheck', val)
    }
  },
  created() {
    this.getTree()
    this.getUserList()
  },
  methods: {
    getTree() {
      getTreeAll({ query: this.keyword }).then(res => {
        this.treeData = res.data
        this.defaultExpandAll = true
      })
    },
    // 搜索部门
    onSearch(e) {
      console.log('onSearch', e)
      this.getTree()
    },
    // 选择部门
    onSelect(_selectedKeys, info) {
      // console.log('onSelect', info.selectedNodes[0].data.props)
      this.selectedDeptId = info.selectedNodes[0].data.props.id
      if (this.selectedDeptId) this.getUserList()
    },
    // 获取人员列表
    getUserList() {
      listAll({ pid: this.selectedDeptId, query: this.keyword2 }).then(res => {
        this.userList = res.data
        this.selectedRowKeys = []
      })
    },
    // 选择人员
    onSelectChange(selectedRowKeys) {
      console.log('selectedRowKeys changed: ', selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys
    },
    getCheckboxProps(record) {
      return {
        props: {
          disabled: record.isAdmin === 1,
          id: record.id
        }
      }
    },
    // 设为管理员
    setAdmin() {
      this.setloading = true;
      setDeptAdminApi({
        containChild: 0,
        deptId: this.selectedDeptId,
        state: 1,
        userId: this.selectedRowKeys.join(',')
      }).then(_res => {
        this.setloading = false;
        this.$message.success('设置管理员成功')
        // 刷新列表
        this.getUserList()
      }).catch(_err => {
        this.setloading = false
      })
    },
    // 激活冻结，2024年10月27日16:46:55
    op(op, id) {
      sysPermissionOp(op, id).then(_res => {
        this.$message.success('操作成功')
        // 刷新列表
        this.getUserList()
      })
    },
    handleAdd () {
      this.mdl = null
      this.visible = true
    },
    handleEdit (record) {
      this.visible = true
      this.mdl = { ...record }
    },
    handleOk () {
      const form = this.$refs.createModal.form
      this.confirmLoading = true
      form.validateFields((errors, values) => {
        if (!errors) {
          if (values.id && values.id!=='') {
            // 修改 e.g.
            sysPermissionUpdate(values).then(res => {
              this.visible = false
              this.confirmLoading = false
              // 重置表单数据
              form.resetFields()
              // 刷新表格
              this.getTree()
              this.getUserList()

              this.$message.success('修改成功')
            }).catch(() => {})
          } else {
            // 新增
            sysPermissionAdd(values).then(res => {
              this.visible = false
              this.confirmLoading = false
              // 重置表单数据
              form.resetFields()
              // 刷新表格
              this.getTree()
              this.getUserList()

              this.$message.success('新增成功')
            }).catch(() => {})
          }
        } else {
          this.confirmLoading = false
        }
      })
    },
    handleCancel () {
      this.visible = false
      const form = this.$refs.createModal.form
      form.resetFields() // 清理表单数据（可不做）
    }
  }
}
</script>
<style lang="less" scoped>
  
  .table-action {
    button{
      margin-right: 10px;
    }
  }
  
.main {
  display: flex;
}

.left {
  flex: 1;
  overflow: hidden;

  &::-webkit-scrollbar {
    width: 6px;
  }

  .search-wrap {
    margin-bottom: 10px;
  }

  .ant-tree {
    padding: 10px;
    min-height: 400px;
    border: 1px solid #ccc;
    box-sizing: border-box;
  }
}

.right {
  flex: 2;
  margin-left: 30px;
  overflow: hidden;

  &::-webkit-scrollbar {
    width: 6px;
  }

  .table-operate {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    .tips {
      margin-left: 10px;
      font-size: 14px;
      color: #999;
    }
    .flex-1{
      flex:1;
    }
  }
}
</style>
